<script setup lang="ts">
import WebxTitle from "../webx-title/index.vue";
import { computed, useSlots } from "vue";
import type { PropType } from "vue";

defineOptions({ name: "WebxCard" });
defineProps({
  // 标题组件属性
  titleProps: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
});
// 获取所有插槽
const slots = useSlots();
// 处理标题组件插槽
const titleSlots = computed(() => Object.keys(slots)
    .filter(slotName => slotName.startsWith("title-"))
    .map(slotName => slotName.replace("title-","")))
</script>

<template>
  <div class="bg-white rounded flex flex-col">
    <WebxTitle class="border-b p-2" v-bind="titleProps">
      <template v-for="slotName in titleSlots" #[slotName]>
        <slot :name="`title-${slotName}`" />
      </template>
    </WebxTitle>
    <div class="p-4 gap-2">
      <slot />
    </div>
  </div>
</template>

<style scoped lang="less"></style>
